<template>
  <el-dialog
    title="远程问诊"
    v-model="props.isVisble"
    @closed="closeDialog"
    width="800px"
  >
    <el-form ref="formRef" :model="form" label-width="120px">
      <template v-if="props.type === 'agree'">
        <xm-f-picker
          type="datetime"
          v-model="form.remoteTime"
          quick
          prop="remoteTime"
          label="问诊时间："
          disabledDateT="beforeYesterday"
        ></xm-f-picker>
        <xm-f-Intput
          :rules="rule"
          label="腾讯会议号:"
          prop="number"
          v-model="form.number"
        ></xm-f-Intput>
        <xm-f-Intput
          :rules="ruleNoRequired"
          label="密码:"
          prop="password"
          v-model="form.password"
        ></xm-f-Intput>
        <xm-f-Intput
          :rules="ruleNoRequired"
          type="textarea"
          label="备注:"
          prop="remark"
          v-model="form.remark"
        ></xm-f-Intput>
      </template>
      <template v-else>
        <xm-f-Intput
          :rules="rule"
          type="textarea"
          label="拒绝原因:"
          prop="refuseContent"
          v-model="form.refuseContent"
        ></xm-f-Intput>
        <xm-f-Intput
          :rules="ruleNoRequired"
          type="textarea"
          label="备注:"
          prop="remark"
          v-model="form.remark"
        ></xm-f-Intput>
      </template>
    </el-form>
    <div class="tips">注：我们会以短信及小程序推送方式通知对方</div>
    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <debounce-btn class="footer-button" type="primary" @debounce="onSubmit()">
        确 定
      </debounce-btn>
      <!-- <el-button type="primary" @click="onSubmit">确 定</el-button> -->
    </template>
  </el-dialog>
</template>
<script setup>
  import { ref, watch, watchEffect } from 'vue'
  import {
    modifyFlow,
    saveFlow,
    getFlowHospitaInfo,
    editFlowHospitaInfo,
  } from '@/api/modules/flow.js'
  import { editRemoteMeeting } from '@/api/modules/remoteMeeting.js'
  import { ElLoading, ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  import XmRemoteSelect from 'XMC/XmRemoteSelect'
  import { isExternal } from '@/utils/validate.js'
  import DebounceBtn from '@/components/DebounceBtn'
  const form = ref({})
  const props = defineProps({
    isVisble: Boolean,
    // agree 同意 refuse 拒绝
    type: String,
    // flowId: Number,
    // id: Number,
    flowData: {},
    id: null,
  })
  const emits = defineEmits(['update:isVisble', 'update:flowData', 'toUpdate'])
  const closeDialog = () => {
    emits('update:isVisble', false)

    form.value = {
      remoteTime: null,
      remark: null,
      status: null,
      id: null,
      refuseContent: null,
    }
    formRef.value.resetFields()
  }

  const formRef = ref()
  const onSubmit = () => {
    console.log('valid1 type' + typeof formRef.value.validate)
    formRef.value.validate(async (valid) => {
      console.log('valid2')
      if (valid) {
        console.log('valid3')
        let params = {}
        if (props.type === 'agree') {
          const { remoteTime, number, password, remark } = form.value
          let replyContent =
            '医生：' + store.getters.userInfo.doctorName + '邀请您参加远程复诊'
          replyContent = replyContent + '<br>' + '问诊时间：' + remoteTime
          if (number)
            replyContent =
              replyContent +
              '<br>' +
              '会议 ID：' +
              number +
              '<br>' +
              '复制该信息，打开微信小程序 融畅智联即可参与'
          if (password)
            replyContent = replyContent + '<br>' + '如有密码请输入：' + password
          params = {
            id: props.id,
            remark,
            remoteTime,
            status: 2,
            replyContent: replyContent,
            meetingNumber: number,
            meetingPassword: password,
          }
        } else if (props.type === 'refuse') {
          console.log('valid4')
          const { refuseContent, remark } = form.value
          params = {
            id: props.id,
            remark,
            status: 3,
            replyContent: refuseContent,
          }
        }
        await editRemoteMeeting(params)
        ElMessage.success('发送成功')
        setTimeout(() => {
          emits('update:isVisble', false)
          emits('toUpdate')
        }, 1000)
      }
    })
  }

  const store = useStore()
  watch(
    () => props.isVisble,
    (val) => {}
  )

  const isNotUrl = function (rules, value, cb) {
    if (value && isExternal(value)) {
      cb(new Error('内容必填，且不能带网址'))
    } else if (!value) {
      cb(new Error('内容必填'))
    } else {
      cb()
    }
  }
  const isNotUrlRequired = function (rules, value, cb) {
    if (!value) cb()
    if (value && isExternal(value)) {
      cb(new Error('内容不能带网址'))
    } else {
      cb()
    }
  }
  const rule = [{ required: true, validator: isNotUrl, trigger: 'blur' }]
  const ruleNoRequired = [
    { required: false, validator: isNotUrlRequired, trigger: 'blur' },
  ]
</script>
<style scoped>
  .tips {
    text-align: center;
    font-weight: bold;
  }
</style>
